<div ng-controller="DirectoryCtrl as vm">
    <!-- Main content -->
    <div class="row">
        <div class="col-md-12">
            <div class="box box-warning" >
                <form name="vm.form" novalidate ng-submit="vm.saveTable()">
                <div class="box-header with-border">
                    <h3 class="box-title">Directory</h3>
                    <small class="text-warning">{{vm.msg}}</small>
                    <button ng-disabled="vm.loading" class="btn btn-danger btn-xs pull-right" type="submit" ><i class="fa fa-check-square-o"></i>Submit</button>
                </div>
                <div class="box-body table-responsive no-padding" style="height: 630px">
                    <table class="table table-hover">
                        <form class="form-inline">
                            <table class="table table-bordered table-condensed">
                                <tr>
                                    <th width="20%"></th>
                                    <th width="40%">HR Leader</th>
                                    <th width="40%" >Training Leader</th>
                                </tr>
                                <tr>
                                    <th>Name</th>
                                    <td ng-class="{'has-error': hrname}">
                                        <input type="text" ng-disabled="!vm.editable" required class="form-control has-error"  ng-model="vm.form.hr.name" />
                                        <p class="help-block" ng-show="hrname">This field is required.</p>
                                       
                                    </td>
                                    <td ng-class="{'has-error': trname}">
                                        <input type="text" ng-disabled="!vm.editable" required class="form-control" ng-model="vm.form.tr.name" />
                                         <p class="help-block" ng-show="trname">This field is required.</p>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Position (Band)</th>
                                    <td ng-class="{'has-error': hrposition}">
                                        <input type="text" ng-disabled="!vm.editable" required class="form-control" ng-model="vm.form.hr.position" />
                                         <p class="help-block" ng-show="hrposition">This field is required.</p>
                                    </td>
                                    <td ng-class="{'has-error': trposition}">
                                        <input type="text" ng-disabled="!vm.editable" required class="form-control" ng-model="vm.form.tr.position" />
                                         <p class="help-block" ng-show="trposition">This field is required.</p>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Office Line</th>
                                    <td ng-class="{'has-error': hroline}">
                                        <input type="text" ng-disabled="!vm.editable" required class="form-control" ng-model="vm.form.hr.oline" />
                                         <p class="help-block" ng-show="hroline">This field is required.</p>
                                    </td>
                                    <td ng-class="{'has-error': troline}">
                                        <input type="text" ng-disabled="!vm.editable" required class="form-control" ng-model="vm.form.tr.oline" />
                                         <p class="help-block" ng-show="troline">This field is required.</p>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Mobile</th>
                                    <td ng-class="{'has-error': hrmobile}">
                                        <input type="text" ng-disabled="!vm.editable" required class="form-control" ng-model="vm.form.hr.mobile" />
                                         <p class="help-block" ng-show="hrmobile">This field is required.</p>
                                    </td>
                                    <td ng-class="{'has-error': trmobile}">
                                        <input type="text" ng-disabled="!vm.editable" required class="form-control" ng-model="vm.form.tr.mobile" />
                                         <p class="help-block" ng-show="trmobile">This field is required.</p>
                                    </td>
                                </tr>
                                <tr>
                                    <th>E-mail Address</th>
                                    <td ng-class="{'has-error': hremail}">
                                        <input type="text" ng-disabled="!vm.editable" required class="form-control" ng-model="vm.form.hr.email" />
                                         <p class="help-block" ng-show="hremail">This field is required.</p>
                                    </td>
                                    <td ng-class="{'has-error': tremail}">
                                        <input type="text" ng-disabled="!vm.editable" required class="form-control" ng-model="vm.form.tr.email" />
                                         <p class="help-block" ng-show="tremail">This field is required.</p>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Birthday</th>
                                    <td ng-class="{'has-error': hrbday}">
                                         <input rsmdatedropdowns ng-model="vm.form.hr.birthday" ng-disabled="!vm.editable">
                                        <!-- <input type="text" ng-disabled="!vm.editable" required class="form-control" ng-model="vm.form.hr.birthday" /> -->
                                       <!--  <span class="input-group">
                                          <input type="text" ng-disabled="!vm.editable" required class="form-control" uib-datepicker-popup ng-model="vm.form.hr.birthday" is-open="vm.form.hr.opened" datepicker-options="dateOptions"  ng-required="true" close-text="Close"  readonly/>
                                          <span class="input-group-btn">
                                            <button type="button" class="btn btn-default" ng-click="open(vm.form.hr,$event)" ng-disabled="!vm.editable"> <i class="glyphicon glyphicon-calendar"></i></button>
                                          </span>
                                        </span> -->
                                         <p class="help-block" ng-show="hrbday">This field is required.</p>
                                    </td>
                                    <td ng-class="{'has-error': trbday}">
                                        <input rsmdatedropdowns ng-model="vm.form.tr.birthday" ng-disabled="!vm.editable">
                                        <!-- <input type="text" ng-disabled="!vm.editable" required class="form-control" ng-model="vm.form.tr.birthday" /> -->
                                        <!--  <span class="input-group">
                                          <input type="text" ng-disabled="!vm.editable" required class="form-control" uib-datepicker-popup ng-model="vm.form.tr.birthday" is-open="vm.form.tr.opened" datepicker-options="dateOptions"  ng-required="true" close-text="Close"  readonly/>
                                          <span class="input-group-btn">
                                            <button type="button" class="btn btn-default" ng-click="open(vm.form.tr,$event)" ng-disabled="!vm.editable"> <i class="glyphicon glyphicon-calendar"></i></button>
                                          </span>
                                        </span> -->
                                         <p class="help-block" ng-show="trbday">This field is required.</p>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Hotel Name in Chinese</th>
                                    <td ng-class="{'has-error': hotelname}" colspan="2">
                                        <input type="text" ng-disabled="!vm.editable" required class="form-control" ng-model="vm.form.hotelName" />
                                         <p class="help-block" ng-show="hotelname">This field is required.</p>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Hotel Address in Chinese</th>
                                    <td ng-class="{'has-error': hoteladd}" colspan="2">
                                        <input type="text" ng-disabled="!vm.editable" required class="form-control" ng-model="vm.form.hotelAddress" />
                                         <p class="help-block" ng-show="hoteladd">This field is required.</p>
                                    </td>
                                </tr>
                                <th>Post Code</th>
                                <td ng-class="{'has-error': hotelpost}" colspan="2">
                                    <input type="text" ng-disabled="!vm.editable" required class="form-control" ng-model="vm.form.postal" />
                                     <p class="help-block" ng-show="hotelpost">This field is required.</p>
                                </td>
                                </tr>
                            </table>
                        </form>
                    </table>
                </div>
                <!-- /.box-body -->
            </form>
            </div>
            <!-- /.box -->
        </div>
    </div>
</div>
<!-- /.content -->
</div>
